<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">热力图 Heatmap</h1>
      </el-affix>
      <div id="map" class="map-x" ref="mapBox"></div>
      <el-row :gutter="20">
        <el-col :span="3">
          <span>半径大小</span>
          <el-slider v-model="radius" @change="changeRadius" />
        </el-col>
        <el-col :span="3">
          <span>模糊半径</span>
          <el-slider v-model="blur" @change="changeBlur" />
        </el-col>
        <el-col :span="3">
          <el-button type="success" @click="getHeatName">输出涂层名</el-button>
          <span>  ：{{ layerName }}</span>
        </el-col>
      </el-row>
      <div class="codestyle"><Code /></div>
      <dl>
        <dt>Heatmap对象：</dt>
        <dd>用于将矢量数据渲染为热图的层。请注意，选项中设置的任何属性都设置为module:ol/Object~BaseObject 图层对象的属性；例如，title: 'My Title'在选项中设置意味着它title是可观察的，并且具有 get/set 访问器。（就是说你设置的任何属性都可以通过setget方法去设置或者获取），例如：setRadius，setBlur</dd>
        <dt>Stamen 瓦片服务器的图层源。</dt>
      </dl>
    </div>
  </el-scrollbar>
</template>
<script>
import { toRefs, reactive, ref, onMounted } from 'vue-demi'
import Code from './code.vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Heatmap, Tile } from 'ol/layer'
import { Vector as SourceVector, Stamen } from 'ol/source' // Stamen是底图
import HeatData from '@/geo/heatData.json' // 热力图数据
import GeoJSON from 'ol/format/GeoJSON' // 解析geojson格式
export default {
  setup () {
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      radius: 5,
      blur: 15,
      layerName: '',
      vector: new Heatmap({ // 热力图
        name: '热力图',
        source: new SourceVector({
          features: new GeoJSON().readFeatures(HeatData, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:4326'
          })
        }),
        radius: 10, // 半径大小
        blur: 10, // 模糊
        gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00'] // 热力图颜色（可以不设置）
      })
    })

    const init = () => {
      const raster = new Tile({
        source: new Stamen({
          layer: 'toner'
        })
      })

      state.map = new Map({
        target: state.mapBox,
        layers: [raster, state.vector],
        view: new View({
          center: [20.042007, -35.349998],
          zoom: 19 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }

    // 修改半径大小
    const changeRadius = () => {
      state.vector.setRadius(parseInt(state.radius, 10))
    }

    // 修改模糊半径
    const changeBlur = () => {
      state.vector.setBlur(parseInt(state.blur, 10))
    }

    const getHeatName = () => {
      const layers = state.map.getLayers()
      for (var i = 0; i < layers.getLength(); i++) {
        // console.log(layers.item(i))
        console.log('图层名：', layers.item(i).get('name'))
        state.layerName = layers.item(i).get('name')
      }
    }

    onMounted(() => {
      init()
    })

    return {
      init,
      changeRadius,
      changeBlur,
      getHeatName,
      ...toRefs(state)
    }
  },
  components: {
    Code
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
.el-row {
  margin-top: 20px;
}
</style>
